import { Col, Row, Table } from 'antd'
import Card from 'antd/es/card/Card'
import React, { useEffect, useState } from 'react'
import { getData } from '../../api'
import { columns, countData } from './config'
import { iconToElement } from '../../utils/tools'
import MyEcharts from '../../components/echarts'
import './home.css'

const Home = () => {
  // 定义表格数据
  const [tableData, setTableData] = useState([])

  // echarts
  const [chartData, setChartData] = useState({})

  // 获取接口数据
  const getHomeData = async () => {
    const { data = { data } } = await getData({})
    const { code, data: datas } = data
    const { tableData, orderData, userData, videoData } = datas
    setTableData(tableData)
    console.log(datas)
    // 对echarts数据组装
    const xData = orderData.date
    const keyArray = Object.keys(orderData.data[0])
    const series = []
    keyArray.forEach((key) => {
      series.push({
        name: key,
        data: orderData.data.map((item) => item[key]),
        type: 'line',
      })
    })
    setChartData({
      order: {
        xData,
        series,
      },
      user: {
        xData: userData.map((item) => item.date),
        series: [
          {
            name: '新增用户',
            data: userData.map((item) => item.new),
            type: 'bar',
          },
          {
            name: '活跃用户',
            data: userData.map((item) => item.active),
            type: 'bar',
          },
        ],
      },
      video: {
        series: [
          {
            data: videoData,
            type: 'pie',
          },
        ],
      },
    })
  }

  useEffect(() => {
    getHomeData()
  }, [])

  return (
    <Row className="home-wrapper">
      <Col span={8}>
        <Card hoverable>
          <div className="user-box">
            <img className="avatar" src={require('../../assets/avator.png')} />
            <div className="userinfo">
              <p className="name">Admin</p>
              <p className="access">超级管理员</p>
            </div>
          </div>
          <div className="login-info">
            <p>
              上次登录时间：<span>20250505</span>
            </p>
            <p>
              上次登录地点：<span>武汉</span>
            </p>
          </div>
        </Card>
        <Card hoverable style={{ marginTop: '20px' }}>
          <Table
            columns={columns}
            dataSource={tableData}
            pagination={false}
            rowKey="name"
          />
        </Card>
      </Col>
      <Col span={16}>
        <Row gutter={16} className="icon-list">
          {countData.map((item, index) => {
            return (
              <Col span={8}>
                <Card
                  hoverable
                  key={index}
                  style={{
                    width: '100%',
                    marginBottom: index < 3 ? '15px' : 0,
                  }}
                >
                  <div
                    className="icon-box"
                    style={{
                      background: item.color,
                    }}
                  >
                    {iconToElement(item.icon)}
                  </div>
                  <div className="icon-detail">
                    <p className="num">￥{item.value}</p>
                    <p className="tips">{item.name}</p>
                  </div>
                </Card>
              </Col>
            )
          })}
        </Row>
        <Row>
          {chartData.order && (
            <MyEcharts
              chartData={chartData.order}
              style={{ width: '100%', height: '240px' }}
            />
          )}
        </Row>
        <Row>
          <Col span={12}>
            {chartData.order && (
              <MyEcharts
                chartData={chartData.user}
                style={{ width: '100%', height: '240px', paddingLeft: '40px' }}
              />
            )}
          </Col>
          <Col span={12}>
            {chartData.order && (
              <MyEcharts
                chartData={chartData.video}
                isAxisChart={false}
                style={{ width: '100%', height: '240px' }}
              />
            )}
          </Col>
        </Row>
      </Col>
    </Row>
  )
}

export default Home
